<!DOCTYPE html>
<html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文字上下轮播</title>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="jq_scroll.js"></script>
    <style type="text/css">
        h3, ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .scrollbox {
            width: 340px;
            margin: 0 auto;
            overflow: hidden;
            border: 1px solid #CFCFCF;
            padding: 10px;
        }

        #scrollDiv {
            width: 340px;
            height: 359px;
            overflow: hidden;
        }

        /*这里的高度和超出隐藏是必须的*/
        #scrollDiv li {
            height: 90px;
            width: 300px;
            padding: 0 20px;
            overflow: hidden;
            vertical-align: bottom;
            zoom: 1;
            border-bottom: #B7B7B7 dashed 1px;
        }

        #scrollDiv li h3 {
            height: 24px;
            padding-top: 13px;
            font-size: 14px;
            color: #353535;
            line-height: 24px;
            width: 300px;
        }

        #scrollDiv li h3 a {
            color: #353535;
            text-decoration: none
        }

        #scrollDiv li h3 a:hover {
            color: #F00
        }

        #scrollDiv li div {
            height: 36px;
            width: 300px;
            color: #416A7F;
            line-height: 18px;
            overflow: hidden
        }

        #scrollDiv li div a {
            color: #416A7F;
            text-decoration: none
        }

        .scroltit {
            height: 26px;
            line-height: 26px;
            padding-bottom: 4px;
            margin-bottom: 4px;
        }

        .scroltit h3 {
            width: 100px;
            float: left;
        }

        .scroltit .updown {
            float: right;
            width: 32px;
            height: 22px;
            margin-left: 4px
        }

        .scroltit span {
            display: inline-block;
            width: 50px;
            text-align: center
        }


        #n {
            margin: 10px auto;
            width: 920px;
            border: 1px solid #CCC;
            font-size: 12px;
            line-height: 30px;
        }

        #n a {
            padding: 0 4px;
            color: #333
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#scrollDiv").Scroll({line: 1, speed: 500, timer: 2000, up: "but_up", down: "but_down"});
        });
    </script>
</head>
<body>
<div class="scrollbox">
    <div id="scrollDiv">
        <ul>
            <li><h3><a href="#" class="linktit">你的标题</a></h3>
                <div>你的内容1...</div>
            </li>
            <li><h3><a href="#" class="linktit">你的标题</a></h3>
                <div>你的内容2...</div>
            </li>
            <li><h3><a href="#" class="linktit">你的标题</a></h3>
                <div>你的内容3...</div>
            </li>
            <li><h3><a href="#" class="linktit">你的标题</a></h3>
                <div>你的内容4...</div>
            </li>
            <li><h3><a href="#" class="linktit">你的标题</a></h3>
                <div>你的内容5...</div>
            </li>
            <li><h3><a href="#" class="linktit">你的标题</a></h3>
                <div>你的内容6...</div>
            </li>
        </ul>
    </div>
    <div class="scroltit"><span id="but_up">↑</span><span id="but_down">↓</span></div>
</div>
</body>
</html>
